<template>
  <div>
    <!-- 顶部导航栏 -->
    <mt-navbar fixed class="gx_navbar" v-model="selected_top">
      <img class="gz_camera" src="../assets/camera.png">
      <div class="gz_kongl"></div>
      <mt-tab-item id="1"><span class="gz_span">关注</span><span class="gz_jiantou"></span></mt-tab-item>
      <mt-tab-item id="2"><span class="gz_span">推荐</span></mt-tab-item>
      <div class="gz_kongr"></div>
      <img class="gz_hongbao" src="../assets/hongbao.png">
      <img class="gz_tianjia" src="../assets/tianjia.png">
    </mt-navbar>
    
    <!-- 关注选项卡主体 -->
    <mt-tab-container class="gx_container" v-model="selected_top">
      <!-- 关注选项卡内容 -->
      <mt-tab-container-item id="1">
        <div v-for="i in 5" :key="i">
          <!-- 微博题头 -->
          <div class="gz_title">
            <!-- 发博人头像 -->
            <div><img class="gx_avatar" src="../assets/avatar/0.jpg"></div>
            <div class="gx_msg">
              <!-- 发博人账号 -->
              <div class="gx_uname">头条新闻</div>
              <!-- 发博信息 -->
              <div class="gx_time"><span>2021-4-25 19:28</span>&nbsp;<span>来自&nbsp;新加关注</span></div>
            </div>
            <!-- 下拉列表箭头按钮 -->
            <div class="gx_xiala"><img class="gx_unfold" src="../assets/unfold.png"></div>
          </div>
          <!-- 微博内容 -->
          <div class="gx_content">今年“五一”放假5天，当前疫情防控形势稳定，春节“就地过年”积压的探亲、出游需求有望进一步释放，再加上“五一”本来就是传统出行旺季,业内预计“五一”假期或迎来报复性出游，旅游人次有望突破2019年同期，达2亿人次新高。今年“五一”放假5天，当前疫情防控形势稳定，春节“就地过年”积压的探亲、出游需求有望进一步释放，再加上“五一”本来就是传统出行旺季，业内预计“五一”假期或迎来报复性出游。</div>
          <!-- 微博视频或图片 -->
          <div class="gx_pic">
            <img src="../assets/logo.png">
          </div>
          <hr>
          <!-- 操作：转发，评论，点赞 -->
          <div class="gx_caozuo">
            <!-- 转发 -->
            <div class="gx_zhuan">
              <img class="gx_forward" src="../assets/forward.png">26
            </div>
            <!-- 评论 -->
            <div class="gx_ping">
              <img class="gx_community" src="../assets/community.png">26
            </div>
            <!-- 点赞 -->
            <div class="gx_zan">
              <img class="gx_appreciate" src="../assets/appreciate.png">26
            </div>
          </div>
          <div class="gx_wrap"></div>
        </div>
      </mt-tab-container-item>

      <!-- 推荐选项卡主体 -->
      <mt-tab-container-item id="2">

        <!-- 推荐内嵌的选项卡 -->
        <!-- 内嵌选项卡标题 -->
        <mt-navbar fixed class="gx_navbar gx_container"  v-model="selected_sed">
          <mt-tab-item id="1"><span class="tj_span">热门</span></mt-tab-item>
          <mt-tab-item id="2"><span class="tj_span">电影</span></mt-tab-item>
          <mt-tab-item id="3"><span class="tj_span">放映厅</span></mt-tab-item>
          <mt-tab-item id="4"><span class="tj_span">明星</span></mt-tab-item>
          <mt-tab-item id="5"><span class="tj_span">同城</span></mt-tab-item>
        </mt-navbar>
        <!-- 内嵌选项卡主体 -->
        <mt-tab-container class="gx_container" v-model="selected_sed">
          <mt-tab-container-item id="1" >
            <div v-for="i in 5" :key="i">
              <!-- 微博题头 -->
              <div class="gz_title">
                <!-- 发博人头像 -->
                <div><img class="gx_avatar" src="../assets/avatar/0.jpg"></div>
                <div class="gx_msg">
                  <!-- 发博人账号 -->
                  <div class="gx_uname">头条新闻</div>
                  <!-- 发博人简介 -->
                  <div class="gx_time"><span>知名主持人</span></div>
                </div>
                <!-- 下拉列表箭头按钮 -->
                <div class="gx_xiala"><img class="gx_unfold" src="../assets/unfold.png"></div>
              </div>
              <!-- 微博内容 -->
              <div class="gx_content">今年“五一”放假5天，当前疫情防控形势稳定，春节“就地过年”积压的探亲、出游需求有望进一步释放，再加上“五一”本来就是传统出行旺季,业内预计“五一”假期或迎来报复性出游，旅游人次有望突破2019年同期，达2亿人次新高。今年“五一”放假5天，当前疫情防控形势稳定，春节“就地过年”积压的探亲、出游需求有望进一步释放，再加上“五一”本来就是传统出行旺季，业内预计“五一”假期或迎来报复性出游。</div>
              <!-- 微博视频或图片 -->
              <div class="gx_pic">
                <img src="../assets/logo.png">
              </div>
              <hr>
              <!-- 操作：转发，评论，点赞 -->
              <div class="gx_caozuo">
                <!-- 转发 -->
                <div class="gx_zhuan">
                  <img class="gx_forward" src="../assets/forward.png">26
                </div>
                <!-- 评论 -->
                <div class="gx_ping">
                  <img class="gx_community" src="../assets/community.png">26
                </div>
                <!-- 点赞 -->
                <div class="gx_zan">
                  <img class="gx_appreciate" src="../assets/appreciate.png">26
                </div>
              </div>
              <div class="gx_wrap"></div>
            </div>

          </mt-tab-container-item>
          <mt-tab-container-item id="2">
            <div v-for="i in 5" :key="i">
              <!-- 微博题头 -->
              <div class="gz_title">
                <!-- 发博人头像 -->
                <div><img class="gx_avatar" src="../assets/avatar/0.jpg"></div>
                <div class="gx_msg">
                  <!-- 发博人账号 -->
                  <div class="gx_uname">头条新闻</div>
                  <!-- 发博人机型 -->
                  <div class="gx_time"><span>来自&nbsp;Redmi</span></div>
                </div>
                <!-- 下拉列表箭头按钮 -->
                <div class="gx_xiala"><img class="gx_unfold" src="../assets/unfold.png"></div>
              </div>
              <!-- 微博内容 -->
              <div class="gx_content">今年“五一”放假5天，当前疫情防控形势稳定，春节“就地过年”积压的探亲、出游需求有望进一步释放，再加上“五一”本来就是传统出行旺季,业内预计“五一”假期或迎来报复性出游，旅游人次有望突破2019年同期，达2亿人次新高。今年“五一”放假5天，当前疫情防控形势稳定，春节“就地过年”积压的探亲、出游需求有望进一步释放，再加上“五一”本来就是传统出行旺季，业内预计“五一”假期或迎来报复性出游。</div>
              <!-- 微博视频或图片 -->
              <div class="gx_pic">
                <img src="../assets/logo.png">
              </div>
              <hr>
              <!-- 操作：转发，评论，点赞 -->
              <div class="gx_caozuo">
                <!-- 转发 -->
                <div class="gx_zhuan">
                  <img class="gx_forward" src="../assets/forward.png">26
                </div>
                <!-- 评论 -->
                <div class="gx_ping">
                  <img class="gx_community" src="../assets/community.png">26
                </div>
                <!-- 点赞 -->
                <div class="gx_zan">
                  <img class="gx_appreciate" src="../assets/appreciate.png">26
                </div>
              </div>
              <div class="gx_wrap"></div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="3">
            <div v-for="i in 5" :key="i">
              <!-- 微博题头 -->
              <div class="gz_title">
                <!-- 发博人头像 -->
                <div><img class="gx_avatar" src="../assets/avatar/0.jpg"></div>
                <div class="gx_msg">
                  <!-- 发博人账号 -->
                  <div class="gx_uname">头条新闻</div>
                  <!-- 发博信息 -->
                  <div class="gx_time"><span>来自&nbsp;微博视频号</span></div>
                </div>
                <!-- 下拉列表箭头按钮 -->
                <div class="gx_xiala"><img class="gx_unfold" src="../assets/unfold.png"></div>
              </div>
              <!-- 微博内容 -->
              <div class="gx_content">今年“五一”放假5天，当前疫情防控形势稳定，春节“就地过年”积压的探亲、出游需求有望进一步释放，再加上“五一”本来就是传统出行旺季,业内预计“五一”假期或迎来报复性出游，旅游人次有望突破2019年同期，达2亿人次新高。今年“五一”放假5天，当前疫情防控形势稳定，春节“就地过年”积压的探亲、出游需求有望进一步释放，再加上“五一”本来就是传统出行旺季，业内预计“五一”假期或迎来报复性出游。</div>
              <!-- 微博视频或图片 -->
              <div class="gx_pic">
                <img src="../assets/logo.png">
              </div>
              <hr>
              <!-- 操作：转发，评论，点赞 -->
              <div class="gx_caozuo">
                <!-- 转发 -->
                <div class="gx_zhuan">
                  <img class="gx_forward" src="../assets/forward.png">26
                </div>
                <!-- 评论 -->
                <div class="gx_ping">
                  <img class="gx_community" src="../assets/community.png">26
                </div>
                <!-- 点赞 -->
                <div class="gx_zan">
                  <img class="gx_appreciate" src="../assets/appreciate.png">26
                </div>
              </div>
              <div class="gx_wrap"></div>
            </div>
            
          </mt-tab-container-item>
          <mt-tab-container-item id="4">
            <div v-for="i in 5" :key="i">
              <!-- 微博题头 -->
              <div class="gz_title">
                <!-- 发博人头像 -->
                <div><img class="gx_avatar" src="../assets/avatar/0.jpg"></div>
                <div class="gx_msg">
                  <!-- 发博人账号 -->
                  <div class="gx_uname">头条新闻</div>
                  <!-- 发博人机型 -->
                  <div class="gx_time"><span>来自&nbsp;HUAWEI nova2s</span></div>
                </div>
                <!-- 下拉列表箭头按钮 -->
                <div class="gx_xiala"><img class="gx_unfold" src="../assets/unfold.png"></div>
              </div>
              <!-- 微博内容 -->
              <div class="gx_content">今年“五一”放假5天，当前疫情防控形势稳定，春节“就地过年”积压的探亲、出游需求有望进一步释放，再加上“五一”本来就是传统出行旺季,业内预计“五一”假期或迎来报复性出游，旅游人次有望突破2019年同期，达2亿人次新高。今年“五一”放假5天，当前疫情防控形势稳定，春节“就地过年”积压的探亲、出游需求有望进一步释放，再加上“五一”本来就是传统出行旺季，业内预计“五一”假期或迎来报复性出游。</div>
              <!-- 微博视频或图片 -->
              <div class="gx_pic">
                <img src="../assets/logo.png">
              </div>
              <hr>
              <!-- 操作：转发，评论，点赞 -->
              <div class="gx_caozuo">
                <!-- 转发 -->
                <div class="gx_zhuan">
                  <img class="gx_forward" src="../assets/forward.png">26
                </div>
                <!-- 评论 -->
                <div class="gx_ping">
                  <img class="gx_community" src="../assets/community.png">26
                </div>
                <!-- 点赞 -->
                <div class="gx_zan">
                  <img class="gx_appreciate" src="../assets/appreciate.png">26
                </div>
              </div>
              <div class="gx_wrap"></div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="5">
            <div v-for="i in 5" :key="i">
              <!-- 微博题头 -->
              <div class="gz_title">
                <!-- 发博人头像 -->
                <div><img class="gx_avatar" src="../assets/avatar/0.jpg"></div>
                <div class="gx_msg">
                  <!-- 发博人账号 -->
                  <div class="gx_uname">头条新闻</div>
                  <!-- 发博信息 -->
                  <div class="gx_time"><span>2021-4-25 15:51</span>&nbsp;<span>来自&nbsp;Redmi</span></div>
                </div>
                <!-- 下拉列表箭头按钮 -->
                <div class="gx_xiala"><img class="gx_unfold" src="../assets/unfold.png"></div>
              </div>
              <!-- 微博内容 -->
              <div class="gx_content">今年“五一”放假5天，当前疫情防控形势稳定，春节“就地过年”积压的探亲、出游需求有望进一步释放，再加上“五一”本来就是传统出行旺季,业内预计“五一”假期或迎来报复性出游，旅游人次有望突破2019年同期，达2亿人次新高。今年“五一”放假5天，当前疫情防控形势稳定，春节“就地过年”积压的探亲、出游需求有望进一步释放，再加上“五一”本来就是传统出行旺季，业内预计“五一”假期或迎来报复性出游。</div>
              <!-- 微博视频或图片 -->
              <div class="gx_pic">
                <img src="../assets/logo.png">
              </div>
              <hr>
              <!-- 操作：转发，评论，点赞 -->
              <div class="gx_caozuo">
                <!-- 转发 -->
                <div class="gx_zhuan">
                  <img class="gx_forward" src="../assets/forward.png">26
                </div>
                <!-- 评论 -->
                <div class="gx_ping">
                  <img class="gx_community" src="../assets/community.png">26
                </div>
                <!-- 点赞 -->
                <div class="gx_zan">
                  <img class="gx_appreciate" src="../assets/appreciate.png">26
                </div>
              </div>
              <div class="gx_wrap"></div>
            </div>
          </mt-tab-container-item>
        </mt-tab-container>

      </mt-tab-container-item>

    </mt-tab-container>


    <!-- 底部导航栏 -->
    <mt-tabbar v-model="selected_bottom" fixed>
      <mt-tab-item id="home">
        <img v-if="selected_bottom=='home'" src="../assets/homefill.png" slot="icon">
        <img v-else src="../assets/home.png" slot="icon">
        首页
      </mt-tab-item>
      <mt-tab-item id="video">
        <img v-if="selected_bottom=='video'" src="../assets/recordfill.png" slot="icon">
        <img v-else src="../assets/record.png" slot="icon">
        视频号
      </mt-tab-item>
      <mt-tab-item id="found">
        <img v-if="selected_bottom=='found'" src="../assets/samefill.png" slot="icon">
        <img v-else src="../assets/same.png" slot="icon">
        发现
      </mt-tab-item>
      <mt-tab-item id="community">
        <img v-if="selected_bottom=='community'" src="../assets/communityfill.png" slot="icon">
        <img v-else src="../assets/community.png" slot="icon">
        消息
      </mt-tab-item>
      <mt-tab-item id="people">
        <img v-if="selected_bottom=='people'" src="../assets/peoplefill.png" slot="icon">
        <img v-else src="../assets/people.png" slot="icon">
        我
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected_top:"1",
      selected_sed:"1",
      selected_bottom:"home"
    }
  },
  watch: {
    // 页面跳转
    selected_bottom(newval){
      if(newval=="home"){
        this.$router.push('/');
      }else if(newval=="video"){
        this.$router.push('/video');
      }else if(newval=="found"){
        this.$router.push('/found');
      }else if(newval=="community"){
        this.$router.push('/community');
      }else if(newval=="people"){
        this.$router.push('/people');
      }
    }
  }
}
</script>

<style scoped>
/* 选项卡字体 */
.gz_span{
  font-size: 18px;
}
.tj_span{
  font-size: 16px;
}
.gx_navbar{
  padding-bottom: 5px;
  border-bottom: 1px solid #EBEBEB;
}
.gx_container{
  margin-top: 55px;
}
/* 顶部的相机，红包，添加 */
.gz_camera,
.gz_hongbao,
.gz_tianjia{
  height: 35px;
  margin-top: 5px;
  margin-left: 7px;
}
/* 顶部左边空白 */
.gz_kongl{
  width: 82px;
}
/* 顶部右边空白 */
.gz_kongr{
  width: 42px;
}
/* 顶部导航文字 */
.mint-navbar .mint-tab-item.is-selected{
  color: rgb(255, 150, 68);
  border-bottom: 3px solid rgb(255, 150, 68);
}
/* 下箭头 */
/* .gz_jiantou{
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid rgb(255, 150, 68);
  position: absolute;
  top: 28px;
  left: 175px;
} */
/* 关注选项卡内容 */
/* 微博题头 */
.gz_title{
  display: flex;
  height: 65px;
  position: relative;
}
/* 发博人头像 */
.gx_avatar{
  width: 60px;
  border-radius: 50%;
  margin-left: 7px;
  margin-top: 4px;
}
/* 发博人信息 */
.gx_msg{
  margin-left: 10px;
}
/* 发博人账号 */
.gx_uname{
  height: 25px;
  color: rgb(255, 150, 68);
  font-size: 18px;
  font-weight: bold;
  margin-top: 7px;
}
/* 发博时间 */
.gx_time{
  margin-top: 10px;
}
.gx_time span{
  color: #999;
}
/* 下拉箭头 */
.gx_xiala{
  position: absolute;
  right: 5px;
  height: 65px;
  top: 10px;
}
.gx_unfold{
  height: 20px;
}
/* 微博内容 */
.gx_content{
  margin-top: 10px;
  margin-left: 7px;
  height: 175px;
  display: -webkit-box;    
  -webkit-box-orient: vertical;    
  -webkit-line-clamp: 7;    
  overflow: hidden; 
  line-height: 25px;
}
/* 微博图片或视频 */
.gx_pic{
  width: 100%;
}
/* 操作：转发，评论，点赞 */
.gx_caozuo{
  display: flex;
}
.gx_zhuan,
.gx_ping,
.gx_zan{
  display: flex;
  width: 33.3%;
  justify-content: center;
}
.gx_forward,
.gx_community,
.gx_appreciate{
  height: 20px;
}
/* 换行 */
.gx_wrap{
  height: 10px;
  width: 100%;
  margin: 10px 0 38px 0;
  background-color: rgb(237, 237, 237);
}
/* 推荐选项卡内容 */

/* 底部选项卡 */
.mint-tabbar>.mint-tab-item.is-selected{
  color: #2C3E50;
}
</style>